<script setup lang='ts'>
import { reactive, ref } from 'vue';
import { getGroup, getPage } from '@/api/jishang/jishang';
import { ElMessage, FormInstance, UploadProps } from 'element-plus';
import { getToken } from '@/utils/auth';
import router from '@/router';

interface tableDataType {
    articleGroupId: string
    displaying: number
    mainPic: string
    sort: number
    title: string
}

const tableData = ref<tableDataType[]>([]);
const dialogFormVisible = ref(false);
//重置
function  reset(){
    tableData.value.length = 0;
    getPage().then(res =>{
        (res as any).rows.map((item: any) => {
            tableData.value.push(item);
            console.log(tableData.value);

        });
    });
}

//渲染
getPage().then(res =>{
    (res as any).rows.map((item: any) => {
        tableData.value.push(item);
        console.log(tableData.value);

    });
});
//是否展示
let showParams = ref({
    articleGroupId:'',
    title: "",
    displaying: 1,
    mainPic: "",
    sort: 4
});
function show(id) {
    console.log(id);
    showParams.value.title = id.row.title;
    showParams.value.articleGroupId = id.row.articleGroupId;
    showParams.value.displaying = id.row.displaying;
    showParams.value.mainPic = id.row.mainPic;
    showParams.value.sort = id.row.sort;
    getGroup(showParams.value).then(res =>{
        console.log(res);
    });
}
//编辑
const imageUrlPc = ref('');
const imageUrl = ref('');
const formRef = ref<FormInstance>();
const nameValidateForm = reactive({
    articleGroupId: "",
    title: "",
    displaying: 0,
    mainPic: "",
    sort: 0,
});
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};
// const handleAvatarSuccess: UploadProps['onSuccess'] = (
//     response
// ) => {
//     imageUrl.value = response.fileName;
// };
let editData = ref()
function handleClick(edit) {
    console.log(edit);
    editData.value = edit;
    nameValidateForm.title = edit.row.title;
    imageUrlPc.value = edit.row.mainPic;
    nameValidateForm.sort = edit.row.sort;
}
const handleAvatarSuccessPc: UploadProps['onSuccess'] = (
    response
) => {
    imageUrlPc.value = response.fileName;
};
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!');
        return false;
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!');
        return false;
    }
    return true;
};
let headers = reactive({ 'Authorization': 'Bearer ' + getToken() });
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!');
            open2();
            dialogFormVisible.value = false;
        } else {
            console.log('error submit!');
            return false;
        }
    });
};
const open2 = () => {
    ElMessage({
        message: '修改成功',
        type: 'success',
    });
};
function changeEnter(){
    showParams.value.title = nameValidateForm.title;
    showParams.value.articleGroupId = editData.value.row.articleGroupId;
    showParams.value.mainPic = imageUrlPc.value;
    showParams.value.sort = nameValidateForm.sort;
    console.log(editData.value);
    console.log(showParams.value);
    getGroup(showParams.value).then(res =>{
        console.log(res);
    });
    setTimeout(function(){
        reset();
    },100);
}

//设置
function jumpUserEquity(id){
    router.push({path: '/home/SetArticle', query: {articleGroupId: id}});
}
</script>

<template>
<div>
    <el-table :data='tableData' style='width: 90%;margin: auto;text-align: center'>
        <el-table-column fixed prop='title' label='名称' />
        <el-table-column prop='name' label='图片/视频'>
            <template #default='img'>
                <img :src=' "/dev-api"+tableData[img.$index].mainPic' style='width: 100px;height: 50px'>
            </template>
        </el-table-column>


        <el-table-column prop='displaying' label='是否展示' >
            <template #default='tableDataDisplay'>
                <el-switch
                    v-model='tableDataDisplay.row.displaying'
                    size='large'
                    prop='displaying'
                    @click='show(tableDataDisplay)'
                    :active-value=1
                    :inactive-value=0
                />
            </template>
        </el-table-column>
        <el-table-column prop='sort' label='排序'  />
        <el-table-column fixed='right' label='操作' >
            <template #default=tableDataEdit>
                <el-button link type='primary' size='small'
                           @click='handleClick(tableDataEdit);dialogFormVisible = true'>
                    编辑
                </el-button>
                <el-button @click="jumpUserEquity(tableDataEdit.row.articleGroupId)" link type='primary' size='small' >
                    设置
                </el-button>

            </template>
        </el-table-column>
    </el-table>
    <!--    编辑-->
    <el-dialog v-model='dialogFormVisible' title='编辑' width='700'>
        <el-form
            ref='formRef'
            style='max-width: 600px'
            :model='nameValidateForm'
            label-width='auto'
            class='demo-ruleForm'
        >
            <el-form-item
                label='名称'
                prop='title'
                :rules="[
        { required: true, message: '请输入名称' },
        { type: 'string', message: '请输入' },
                 ]">
                <el-input
                    v-model.string='nameValidateForm.title'
                    type='text'
                    autocomplete='off'
                />
            </el-form-item>
            <el-form-item
                label='封面图'
                prop='mainPic'
                :rules="[
        { required: false, message: '请上传图像' },
        { type: 'string', message: '请输入' },
                 ]"
            >
                <el-upload
                    class='avatar-uploader'
                    action='/dev-api/common/upload'
                    :show-file-list='false'
                    :on-success='handleAvatarSuccessPc'
                    :before-upload='beforeAvatarUpload'
                    :headers='headers'
                >
                    <img v-if='imageUrlPc' :src='"/dev-api"+ imageUrlPc' class='avatar'
                         style='width: 200px;height: 200px' />
                    <el-icon v-else class='avatar-uploader-icon'>
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item
                label='排序'
                prop='sort'
                :rules="[
        { required: false, message: '请输入排序' },

                 ]">

                <el-input
                    v-model.string='nameValidateForm.sort'
                    type='text'
                    autocomplete='off'
                />
            </el-form-item>
<!--            <el-form-item-->
<!--                label='移动端轮播图'-->
<!--                prop='mien'-->
<!--                :rules="[-->
<!--        { required: false, message: '请上传图像' },-->
<!--        { type: 'string', message: '请输入' },-->
<!--                 ]"-->
<!--            >-->
<!--                <el-upload-->
<!--                    class='avatar-uploader'-->
<!--                    action='/dev-api/common/upload'-->
<!--                    :show-file-list='false'-->
<!--                    :on-success='handleAvatarSuccess'-->
<!--                    :before-upload='beforeAvatarUpload'-->
<!--                    :headers='headers'-->
<!--                >-->
<!--                    <img v-if='imageUrl' :src='"/dev-api"+ imageUrl' class='avatar'-->
<!--                         style='width: 200px;height: 200px' />-->
<!--                    <el-icon v-else class='avatar-uploader-icon'>-->

<!--                        <Plus />-->
<!--                    </el-icon>-->
<!--                </el-upload>-->
<!--            </el-form-item>-->
<!--            <p>富文本</p>-->
<!--            <el-form-item style='margin-left: 80px ;width: 520px'>-->
<!--                <editor />-->
<!--            </el-form-item>-->
            <el-form-item style='width: 200px;margin-left: 500px'>
                <el-button type='primary' @click='open2;changeEnter(); submitForm(formRef);'>确认</el-button>
                <el-button @click='resetForm(formRef);dialogFormVisible = false;'>取消</el-button>
            </el-form-item>

        </el-form>

    </el-dialog>
</div>
</template>

<style scoped>
/deep/ .cell{
    text-align: center;
}
img{
    display: inline-block;
}
</style>
